<!DOCTYPE html>
<html>

<head>
  <title>数据库文档</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.4.10/dist/antd.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
</head>
<style>
  body.html {
    height: 100%;
    width: 100%;
    margin: 0;
  }

  #app {
    height: 100%;
    margin: 0 auto;
    width: calc(100% - 400px);
    box-sizing: border-box;
  }

  #app .box {
    height: 100vh;
    width: 100%;
  }

  #anchor {
    position: fixed;
    top: 100px;
    right: 0px;
    width: 150px;
  }

  .ant-anchor-link-title {
    padding-left: 10px;
  }

  .ant-anchor-link {
    padding: 7px 0 7px 0px;
    line-height: 1.143;
  }

  .db-table-name {
    border-left: 4px solid #00ab6d;
    padding-left: 15px;
  }

  .ant-table-small {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .table-group {
    margin: 10px 0 30px 0;
  }
</style>

<body>

  <div id="app">
    <a-spin v-if="visible" :spinning="loading" size="large">
      <div class="box">
        <div id="table_info_list" class="table-group">
          <h1 class="db-table-name">{{ '表清单' }}</h1>
          <a-table :columns="tableInfocolumns" :data-source="tableList" :pagination="false" size="small">
          </a-table>
        </div>

        <template v-for="(item,index) in tableList">
          <div :id="'table_' + item.tableName" :key="index" class="table-group">
            <h1 class="db-table-name">{{ item.tableName }}</h1>
            <a-table :columns="columnInfoColumns" :data-source="item.columnList" :pagination="false" size="small">
              <span slot="nullAble" slot-scope="text, record, index">{{ record.nullAble ? 'true' : 'false' }}</span>
              <span slot="primaryKey" slot-scope="text, record, index">{{ record.primaryKey ? 'true' : 'false' }}</span>
            </a-table>
          </div>
        </template>

        <div id="anchor">
          <a-anchor>
            <a-anchor-link href="#table_info_list" title="表清单" :key="index" />
            <template v-for="(item,index) in tableList">
              <a-anchor-link :href="'#table_' + item.tableName" :title="item.tableName" :key="index" />
            </template>
          </a-anchor>
        </div>
      </div>
    </a-spin>
  </div>

</body>
<script type="text/javascript">
  const columnInfoColumns = [
    {
      title: "字段名",
      dataIndex: "columnName",
    },
    {
      title: "字段类型",
      dataIndex: "columnSqlType",
    },
    {
      title: "允许空",
      dataIndex: "nullAble",
      scopedSlots: { customRender: 'nullAble' }
    },
    {
      title: "主键",
      dataIndex: "primaryKey",
      scopedSlots: { customRender: 'primaryKey' }
    },
    {
      title: "备注",
      dataIndex: "remark",
    }
  ]

  const tableInfocolumns = [
    {
      title: "表名",
      dataIndex: "tableName",
    },
    {
      title: "类型",
      dataIndex: "tableType",
    },
    {
      title: "备注",
      dataIndex: "remark",
    }
  ]

  new Vue({
    el: "#app",
    components: {
    },
    computed: {
    },
    data () {
      return {
        visible: false,
        loading: false,
        columnInfoColumns: columnInfoColumns,
        tableInfocolumns: tableInfocolumns,
        tableList: [],
        data: [
          { name: '11' },
          { name: '11' },
          { name: '11' },
          { name: '11' },
          { name: '11' },
          { name: '11' },
          { name: '11' }
        ]
      }
    },
    mounted () {
      this.loading = true
      const self = this

      $.ajax({
        type: "get",
        url: "/v1/dbdoc/getDbMetaData",
        success: function (res) {
          self.tableList = res
          self.visible = true
          self.loading = false
        },
        fail: function() {
          self.visible = false
        }
      })
    },
    created () {

    },
    methods: {
      getContainer () {
        return document.getElementById('table')
      }
    }
  })
</script>

</html>